<template>
  <div class="realTime">
    <div class="boxTitle">
      <img src="@/assets/images/home/rightIcon.png" alt="">
      <span class="title">实时数据统计</span>
    </div>
    <div class="content">
      <div class="quest">
        <div class="quest_content">
           <img class="realTime_icon" src="@/assets/images/dailyMaintenance/realTime_icon.png" alt="">
          <span>巡检任务总数：</span><span class="quest_num">280</span>
        </div>
        <span class="today">今日</span>
      </div>
      <div class="condition">
        <div class="condition_title">各类任务完成情况</div>
        <div class="condition_title2">已巡检/分类任务总数</div>
        <div class="condition_percent">
          <template v-for="item in percent.list">
            <div class="condition_item">
              <el-progress type="circle" :percentage="item.percentage" color="#00E3FE" />
              <span class="circle_name">设备间</span>
              <span class="circle_num">{{ item.num }}/{{ item.numAll }}</span>
            </div>
          </template>

        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

let percent = reactive({
  list: [
    { name: "设备间", percentage: 25, num: 75, numAll: 100 },
    { name: "设备间", percentage: 25, num: 75, numAll: 100 },
    { name: "设备间", percentage: 25, num: 75, numAll: 100 },
  ] as any
})
</script>

<style lang="scss" scoped>
.realTime {
  // transition: transform 0.5s ease;
  position: absolute;
  z-index: 999;
  background: url(@/assets/images/dailyMaintenance/l-bg-01.png) no-repeat;
  background-size: 100% 100%;
  left: vh(20);
  top: vh(61);
  width: vh(421);
  height: vh(280);
  font-size: vh(14);
  color: #FFFFFF;


  .boxTitle {
    img {
      width: vh(16);
      height: vh(14);
    }
  }

  .content {
    padding: vh(9) vh(16);

    .quest {
      display: flex;
      line-height: 1;
      padding-bottom: vh(12);
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);

      .quest_content {
        flex: 1;
        .realTime_icon {
          margin-right: 4px;
        }
        .quest_num {
          font-family: DIN;
          font-weight: 400;
          font-size: vh(18);
          color: #FFAC00;
        }
      }

      .today {
        width: vh(42);
        height: vh(19);
        line-height: vh(19);
        text-align: center;
        background: rgba(0, 227, 254, 0.2);
        border-radius: vh(4);
        font-size: 12px;
        color: #00D6FF;
      }

    }

    .condition {
      line-height: 1;

      .condition_title {
        margin-top: vh(12);
        margin-bottom: vh(11);
        font-size: vh(14);
        color: #FFFFFF;
      }

      .condition_title2 {
        font-size: vh(12);
        color: #00B1CD;
      }

      .condition_percent {
        display: flex;
        justify-content: space-between;
        padding: vh(18) vh(11) 0;

        .condition_item {
          display: flex;
          flex-direction: column;
          align-items: center;

          :deep(.el-progress) {
            margin-bottom: 11px;

            .el-progress-circle {
              width: vh(77) !important;
              height: vh(77) !important;

              .el-progress-circle__track {
                stroke: #616D79;
              }
            }

            .el-progress__text {
              font-family: DIN;
              font-weight: 400;
              font-size: vh(16);
              color: #00E3FE;
            }
          }

          .circle_name {
            margin-bottom: vh(7);
            font-size: 12px;
            color: #FFFFFF;
          }

          .circle_num {
            font-size: vh(14);
            color: #00E3FE;
          }
        }
      }
    }
  }
}
</style>
